<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->

    <link rel="shortcut icon" href="/assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="/assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="/assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="/assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="/assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="/assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="/assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="/assets/css/main.css">


    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>



</head>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top Start Here ==================== -->
<div class="header-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
            <div class="top-contact">
                <a href="" class="top-contact__logo">
                    <img src="/assets/picture/footer-logo02.png" alt="logo">
                </a>
            </div>      
              <div class="d-flex flex-wrap align-items-center justify-content-center">
                   <div class="d-md-block d-none">
                    <div class="contact-list__wrapper d-flex flex-wrap justify-content-between">
                    <div class="contact-list style-two">
                            <span class="contact-list__icon"> 
                                <img src="/assets/picture/phone.png" alt="">
                            </span>
                            <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                      <div class="contact-list">
                            <span class="contact-list__icon"> 
                                <img src="/assets/picture/email.png" alt="">
                            </span>
                            <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="dea8b7adbbacaebbaa9eb9b3bfb7b2f0bdb1b3">[email&#160;protected]</a></span>
                    </div>
                    </div>
                   </div>
                   <div class="currency-box">
                    <select class="select">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                   </div>
              </div>
           
        </div>
    </div>
</div>
<!-- ==================== Header Top End Here ==================== -->

<!-- ==================== Bottom Header End Here ==================== -->
<header class="header" id="header">
  <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
          <button class="navbar-toggler header-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span id="hiddenNav"><i class="las la-bars"></i></span>
          </button>
          
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav nav-menu me-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                       <ul class="dropdown-menu">
                        <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href=""> Home One </a></li>

                       </ul>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" aria-current="page" href="about.html">About</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="product-category.html">Product Category</a></li>
                        <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="faq.html"> Faq </a></li>
                    </ul>
                    </li> 
                      <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html">Blog</a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html">Blog Details</a></li>
                      </ul>
                      </li> 
                  <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
                  <li class=" nav-item">
                    <div class="toggle-search-box d-none d-lg-block">
                        <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                    </div>
                  </li>
              </ul>
          </div>
          <div class="header-info">

            <div class="header-info__wishlist">
               <a href="wishlist.html" class="header-info__link"><i class="far fa-heart"></i></a>
            </div>
            <div class="header-info__cart">
                   <a href="cart.html" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                   <span class="header-info__cart-quantity">03</span>
            </div>
            <div class="header-info__user">
               <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
            </div>
         </div>
         <div class="header-categories d-block d-lg-none">
            <button class="header-category">
                Categories <span class="header-category__icon"><i class="las la-bars"></i></span>
            </button>
        </div>
      </nav>
  </div>
</header>
<!-- ==================== Bottom Header End Here ==================== -->

 <!--========================== Search Modal Start ==========================-->

<!--========================== Search Modal End ==========================-->



<!--========================== Banner Section Start ==========================-->
<section class="banner-section pt-60 pb-60">
  <div class="container">
      <div class="row gy-4 justify-content-center">
          <div class="col-lg-3">
            <nav class="category">
                <span class="close-sidebar d-lg-none d-block"><i class="las la-times"></i></span>
                <ul class="category-menu">
                    <li class="category-menu__item has-dropdown"   data-id="1"  >
                        <a href="product-category.html" class="category-menu__link">
                            <span class="category-menu__thumb"><img src="assets/picture/dog01.png" alt=""></span> 狗粮 <span class="category-menu__icon"><i class="las la-angle-down"></i></span></a>
                        <ul id="dropdown-1" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>

                    </li>
                    <li class="category-menu__item  has-dropdown"  data-id="2">
                        <a href="product-category.html" class="category-menu__link"><span class="category-menu__thumb"><img src="assets/picture/cat.png" alt=""></span> 猫咪 <span class="category-menu__icon"><i class="las la-angle-down"></i></span></a>

                        <ul id="dropdown-2" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>

                    </li>


                    <li class="category-menu__item has-dropdown"   data-id="3">
                        <a href="product-category.html" class="category-menu__link"> <span class="category-menu__thumb"><img src="assets/picture/fish.png" alt=""></span> 鱼 <span class="category-menu__icon"><i class="las la-angle-down"></i></span></a>

                        <ul id="dropdown-3" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>

                    </li>

                    <li class="category-menu__item has-dropdown"  data-id="4">
                        <a href="product-category.html" class="category-menu__link"><span class="category-menu__thumb"><img src="assets/picture/toys.png" alt=""></span> 宠物玩具 <span class="category-menu__icon"><i class="las la-angle-down"></i></span></a>

                        <ul id="dropdown-4" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>

                    </li>


                    <li class="category-menu__item has-dropdown" data-id="5" >
                        <a href="product-category.html" class="category-menu__link">
                            <span class="category-menu__thumb"><img src="assets/picture/parrot.png" alt=""></span>
                               Parrot <span class="category-menu__icon">
                              <i class="las la-angle-down"></i>
                            </span>
                        </a>
                        <ul id="dropdown-5" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>

                    </li>


                    <li class="category-menu__item has-dropdown" data-id="6" >
                        <a href="product-category.html" class="category-menu__link"><span class="category-menu__thumb"><img src="assets/picture/rabbit.png" alt="">
                        </span> 兔子<span class="category-menu__icon"><i class="las la-angle-down"></i></span> </a>
                        <ul id="dropdown-6" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>
                    </li>
                    <li class="category-menu__item has-dropdown" data-id="7">
                        <a href="product-category.html" class="category-menu__link"><span class="category-menu__thumb"><img src="assets/picture/accessories.png" alt=""></span> Accessories <span class="category-menu__icon"><i class="las la-angle-down"></i></span></a>
                        <ul id="dropdown-7" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>

                    </li>
                    <li class="category-menu__item has-dropdown" data-id="8">
                        <a href="product-category.html" class="category-menu__link"><span class="category-menu__thumb"><img src="assets/picture/dog02.png" alt=""></span> Small pet <span class="category-menu__icon"><i class="las la-angle-down"></i></span></a>
                        <ul id="dropdown-8" class="dropdown-menu">
                            <!-- 子类别项将会动态添加到这里 -->
                        </ul>
                    </li>
                 </ul>

                 <div class="contact-list__wrapper d-md-none d-block">
                    <div class="contact-list">
                     <div class="contact-list__item">
                         <span class="contact-list__icon">
                            <img src="assets/picture/phone.png" alt="">
                         </span>
                     </div>
                      <div class="contact-list__number-link">
                         <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                    </div>
                    <div class="contact-list">
                     <div class="contact-list__item">
                         <span class="contact-list__icon">
                            <img src="assets/picture/email.png" alt="">
                         </span>
                     </div>
                      <div class="contact-list__number-link">
                         <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="60160913051210051420070d01090c4e030f0d">[email&#160;protected]</a></span>
                      </div>
                    </div>
                 </div>
            </nav>
          </div>





          <div class="col-lg-9 col-md-12">
            <div class="banner">
                <div class="banner-content">
                    <h4 class="banner-content__subtitle">Best Product</h4>
                    <h2 class="banner-content__title">DOG FOOD</h2>
                    <p class="banner-content__desc">
                        Wusmod tempor incididu nt ut labore et dolore magna aliqua.
                    </p>
                    <div class="banner-content__buttons">
                        <a href="product-category.html" class="btn btn--base pill">SHOP NOW</a>
                        <div class="button-shape">
                            <img src="assets/picture/button-shape.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="banner-thumb">
                    <img src="assets/picture/banner-img.png" alt="">
                    <div class="banner-thumb__shape">
                        <img src="assets/picture/banner-shape.png" alt="">
                    </div>
                </div>
            </div>
          </div>
      </div>
  </div>
</section>
<!--========================== Banner Section End ==========================-->




<!--<script>-->
<!--    $(document).ready(function () {-->
<!--        // 监听分类项的鼠标悬停事件-->
<!--        $('.category-menu__item.has-dropdown').on('mouseenter', function () {-->
<!--            const categoryId = $(this).attr('data-id'); // 获取分类 ID-->
<!--            const dropdown = $(`#dropdown-${categoryId}`); // 获取对应的下拉框-->

<!--            // 如果下拉框中已经有内容，则不重复加载-->


<!--            // 发送 AJAX 请求-->
<!--            $.ajax({-->
<!--                url: 'category/child', // 后端接口地址-->
<!--                type: 'GET',-->
<!--                data: { id: categoryId }, // 传递分类 ID-->
<!--                success: function (res) {-->

<!--                        let html = '';-->
<!--                        // 遍历返回的数据，动态生成下拉项-->
<!--                        res.data.forEach(function (child) {-->
<!--                            html += `-->
<!--                                <li class="category-dropdown__item">-->
<!--                                    <a href="#" class="category-dropdown__link">-->
<!--                                        <span class="category-dropdown__thumb">-->
<!--                                            ${child.imgUrl ? `<img src="${child.imgUrl}" alt="${child.name}">` : ''}-->
<!--                                        </span>-->
<!--                                        ${child.name}-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                            `;-->
<!--                        });-->
<!--                        dropdown.html(html); // 将生成的 HTML 插入下拉框-->

<!--                },-->
<!--                error: function () {-->
<!--                    dropdown.html('<li>加载失败，请重试</li>'); // 请求失败时的提示-->
<!--                }-->
<!--            });-->
<!--        });-->
<!--    });-->
<!--</script>-->



<script>
    $(document).ready(function () {
        // 监听分类项的鼠标悬停事件
        $('.category-menu__item.has-dropdown').on('mouseenter', function () {
            const categoryId = $(this).attr('data-id'); // 获取分类 ID
            const $categoryItem = $(this); // 当前分类项

            // 如果已经存在展示容器，则不重复创建
            if ($categoryItem.find('.dynamic-container').length > 0) return;

            // 动态创建展示容器
            const $container =$('<div>')
                .addClass('dynamic-container')
                .css({
                    position: 'absolute',
                    top: $categoryItem.offset().top +$categoryItem.outerHeight(), // 定位在分类项下方
                    left: $categoryItem.offset().left+250,
                    padding: '15px',
                    backgroundColor: '#f0f0f0',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
                    zIndex: 1000,
                    fontSize: '14px',
                    lineHeight: '1.5'
                });


            // 将容器添加到页面中
            $('body').append($container);

            // 发送 AJAX 请求
            $.ajax({
                url: 'category/child', // 后端接口地址
                type: 'GET',
                data: { id: categoryId }, // 传递分类 ID
                success: function (res) {
                    if (res.code === 0 && res.data.length > 0) {
                        let html = '';
                        // 遍历返回的数据，动态生成内容
                        res.data.forEach(function (child) {
                            html += `
                                <div class="dynamic-item">
                                    <div class="dynamic-item__thumb">
                                        ${child.imgUrl ? `<img src="${child.imgUrl}" alt="${child.name}" style="width: 50px; height: 50px;">` : ''}
                                    </div>
                                    <div class="dynamic-item__name">${child.name}</div>
                                </div>
                            `;
                        });
                        $container.html(html); // 将生成的 HTML 插入容器
                    } else {
                        $container.html('<div>暂无数据</div>'); // 如果没有数据，显示提示
                    }
                },
                error: function () {
                    $container.html('<div>加载失败，请重试</div>'); // 请求失败时的提示
                }
            });
        });

        // 监听分类项的鼠标移出事件
        $('.category-menu__item.has-dropdown').on('mouseleave', function () {
            // 移除展示容器
            $('.dynamic-container').remove();
        });
    });
</script>








<script>
    // 当文档对象模型（DOM）被完全加载和解析完成后，执行下面的函数
    document.addEventListener('DOMContentLoaded', function() {
        var user = sessionStorage.getItem('UPLOAD_USER');
        // 获取当前页面的路径
        var currentPath = window.location.pathname;
        // 检查当前页面是否是 login.html
        if (currentPath.includes('login.html')) {
            // 从 sessionStorage 中获取名为 'UPLOADUSER' 的项

            console.log(user);
            // 检查 'user' 变量是否不为 null 或未定义
            // 如果 'user' 有值，这意味着用户已登录
            if (user!=null) {
                // 用户已登录，将浏览器窗口的地址（URL）重定向到 'user.html' 页面

            }
            // 如果用户未登录，则不进行任何操作，保持当前页面为 login.html
        }
        // 如果当前页面不是 login.html，则不执行任何重定向操作
    });
</script>















<!--==============================offer-section start  here=============================-->
<div class="offer-section pt-60 pb-60">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-6">
                <a href="product-category.html" class="offer">
                    <img src="assets/picture/offer-img.png" alt="">
                </a>
            </div>
            <div class="col-lg-6">
                <a href="product-category.html" class="offer">
                    <img src="assets/picture/offer-img03.png" alt="">
                 </a>
            </div>
        </div>
    </div>
</div>
<!--======================product sections start here =================-->
<div class="product-section py-60">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading">
                    <h4 class="section-heading__subtitle">为您推荐</h4>
                    <h3 class="section-heading__title style-two">个性化推荐<span class="section-heading__bars"></span></h3>
                </div>
            </div>
        </div>
        <div class="row justify-content-center gy-4" id="recommended-products-container">
            <!-- 推荐商品将通过JavaScript动态加载到这里 -->
        </div>
    </div>
</div>

<script>
    // 页面加载时获取推荐商品
    document.addEventListener('DOMContentLoaded', function() {
        fetch('/api/generate-json')
            .then(response => response.json())

             .then(products=> {
                renderRecommendedProducts(products);
             })

            .catch(error => {
                console.error('获取推荐失败:', error);
                // 失败时显示随机商品

            });
    });

    // 渲染推荐商品
    function renderRecommendedProducts(products) {
        const container = document.getElementById('recommended-products-container');
        container.innerHTML = ''; // 清空容器

        products.forEach(product => {
            const productHtml = `
            <div class="col-lg-3 col-md-4 col-sm-6 col-xsm-6">
                <div class="product-item text-center">
                    <div class="product-item__thumb">
                        <a href="javascript:void(0);" onclick="redirectToProductDetail(${product.id})" class="product-item__thumb-link">
                            <img src="${product.imgurl || 'assets/picture/default-product.png'}" alt="${product.name}">
                        </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                                <i class="las la-heart"></i>
                            </span>
                        </button>
                        ${product.state === 1 ? `
                        <div class="product-item__badge">
                            <span class="badge badge--base">Sale</span>
                        </div>` : ''}
                    </div>
                    <div class="product-item__content">
                        <h5 class="product-item__title">
                            <a href="javascript:void(0);" onclick="redirectToProductDetail(${product.id})" class="product-item__title-link">
                                ${product.name}
                            </a>
                        </h5>
                        <ul class="product-info__rating justify-content-center">
                            ${generateRatingStars(product.rating || 4.5)}
                            <li class="product-info__number">${product.rating || 4.5}</li>
                        </ul>
                        <h6 class="product-item__price">
                            <span class="product-item__price-new">$${product.price}</span>
                            <span class="product-item__price-old">$${product.oldprice || product.price}</span>
                        </h6>
                        <button class="btn btn--base pill btn--sm" onclick="addToCart(${product.id})">加入购物车</button>
                    </div>
                </div>
            </div>
        `;
            container.insertAdjacentHTML('beforeend', productHtml);
        });
    }

    // 生成评分星星
    function generateRatingStars(rating) {
        const fullStars = Math.floor(rating);
        const hasHalfStar = rating % 1 >= 0.5;
        let starsHtml = '';

        for (let i = 0; i < 5; i++) {
            if (i < fullStars) {
                starsHtml += '<li class="product-info__rating-item"><i class="fas fa-star"></i></li>';
            } else if (i === fullStars && hasHalfStar) {
                starsHtml += '<li class="product-info__rating-item"><i class="fas fa-star-half-alt"></i></li>';
            } else {
                starsHtml += '<li class="product-info__rating-item"><i class="far fa-star"></i></li>';
            }
        }
        return starsHtml;
    }

    // 跳转到商品详情
    function redirectToProductDetail(productId) {
        fetch('/product?id=' + productId)
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                }
            });
    }

    // 添加到购物车
    function addToCart(productId) {
        fetch('/cart/add?productId=' + productId, { method: 'POST' })
            .then(response => alert('已添加到购物车'))
            .catch(error => alert('添加失败'));
    }
</script>









<!-- ====================deal section start here ====================-->
<div class="best-deals-section py-60">
        <div class="container-fluid p-0">
        <div class="row gx-0 justify-content-center flex-wrap-reverse">
                <div class="col-xl-4">
                   <div class="deal-thumb">
                      <img src="assets/picture/deal-img.png" alt="">
                  </div>
                </div>
                <div class="col-xl-8">
                <div class="deal-counter py-120" style="background-image: url(../static/assets/picture/deal-product-img.png);">
                    <div class="section-heading style-three">
                        <h4 class="section-heading__subtitle">Best products</h4>
                        <h3 class="section-heading__title">Best Deals Of T he Week!</h3>
                     </div>
                     <div id="countdown-container"></div>
                     <div class="deal-counter__footer text-center">
                        <p class="deal-counter__title mb-3">Dummy Product Name</p>
                        <h6 class="deal-counter__price">
                            <span class="deal-counter__price-new">$620</span> $520
                        </h6>
                    </div>
                    <div class="text-center">
                        <a href="product-category.html" class="btn btn--base pill">SHOP NOW</a>
                    </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
<!--===================== deal section end Here ====================-->
<!--==========================new arrival section start here======================-->
<div class="new-arrival-section py-60">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading">
                    <h4 class="section-heading__subtitle">Special products</h4>
                    <h3 class="section-heading__title style-two">New Arrivals product<span class="section-heading__bars"></span></h3>
                 </div>
            </div>
         </div>
            <div class="col-lg-12">
                <div class="filter">
                    <button type="button" data-filter="all" class="mixitup-control-active">All</button>
                    <button type="button" data-filter=".cat">Cat</button>
                    <button type="button" data-filter=".dog">Dog</button>
                    <button type="button" data-filter=".small-pet">Small Pet</button>
                 </div>
            </div>

            <div class="product">
                <div class="row justify-content-center gy-4">            
                 <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6 dog mix small-pet">
                <div class="product-item">
                    <div class="product-item__thumb">
                        <a href="product-two-details.html" class="product-item__thumb-link">
                            <img src="assets/picture/product04.png" alt="">
                         </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                       </div>
                     <div class="product-item__content">  
                       <h5 class="product-item__title">
                          <a href="product-two-details.html" class="product-item__title-link">
                             Nekko Kitten Pouch  
                          </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__number">
                          5.0
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                         <span class="product-item__price-new">$220</span> $180
                      </h6>
                      <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
                     </div>
                </div>
                 </div>
                 <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6 dog mix">
                <div class="product-item">
                    <div class="product-item__thumb">
                         <a href="product-two-details.html" class="product-item__thumb-link">
                             <img src="assets/picture/product02.png" alt="">
                         </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                       </div>
                     <div class="product-item__content"> 
                       <h5 class="product-item__title">
                          <a href="product-two-details.html" class="product-item__title-link">
                              Brit Premium  
                          </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__number">
                          5.0
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                         <span class="product-item__price-new">$360</span> $280
                      </h6>
                      <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
                    </div> 
                </div>
                 </div>
                 <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6 cat small-pet mix">
                <div class="product-item">
                    <div class="product-item__thumb">
                         <a href="product-two-details.html" class="product-item__thumb-link">
                             <img src="assets/picture/product08.png" alt="">
                         </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                       </div>
                     <div class="product-item__content">  
                       <h5 class="product-item__title">
                          <a href="product-two-details.html" class="product-item__title-link">
                             Moderna Trendy Story  
                          </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__number">
                          5.0
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                         <span class="product-item__price-new">$490</span> $360
                      </h6>
                      <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
                   </div>
                </div>
                 </div>
                 <div class="col-lg-3 col-md-6 col-sm-6 col-xsm-6 cat mix">
                <div class="product-item">
                    <div class="product-item__thumb">
                         <a href="product-two-details.html" class="product-item__thumb-link">
                             <img src="assets/picture/product09.png" alt="">
                         </a>
                        <button class="product-item__icon">
                            <span class="product-item__icon-style">
                              <i class="las la-heart"></i>
                            </span>
                        </button>
                       </div>
                     <div class="product-item__content">  
                       <h5 class="product-item__title">
                          <a href="product-two-details.html" class="product-item__title-link">
                              Naughty Cat Bentonite 
                          </a>
                      </h5>
                      <ul class="product-info__rating justify-content-center">
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__rating-item">
                          <i class="fas fa-star"></i>
                        </li>
                        <li class="product-info__number">
                          5.0
                        </li>
                      </ul>
                      <h6 class="product-item__price">
                         <span class="product-item__price-new">$620</span> $520
                      </h6>
                      <a href="cart.html" class="btn btn--base pill btn--sm">Add to Cart </a>
                    </div>
                </div>
                 </div>

                </div>
            </div>
    </div>
</div>
<!-- ==================new offer section start here==================-->
<div class="new-offer-section py-60">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <a href="product-category.html" class="new-offer-content">
                    <img src="assets/picture/new-offer-img.png" alt="">
                </a>
            </div>
        </div>
    </div>
</div>



<!-- ===================new offer section end here =====================-->
<!-- ==========================testimonial section start here=======================-->
<div class="testimonial-section py-60">
    <div class="container">
        <div class="row align-items-center flex-wrap">
            <div class="col-lg-6">
                <div class="testimonials-thumb-slider">
                    <div class="testimonial-thumb">
                        <img src="assets/picture/t-1.png" alt="">
                    </div>  
                    <div class="testimonial-thumb">
                        <img src="assets/picture/testimonial-img.png" alt="">
                    </div>  
                    <div class="testimonial-thumb">
                        <img src="assets/picture/t-2.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="testimonial-slick-slider">
                   <div class="testimonial-slider">
                    <div class="testimonial-slider__icon">
                        <img src="assets/picture/testimonial-icon.png" alt="">
                    </div>
                    <p class="testimonial-slider__desc">
                        A great about us block helps builds trubetween you customers. The more content you provide about you and your business
                    </p>
                    <div class="testimonial-slider__details">
                        <h4 class="testimonial-slider__name">Dianne Russell</h4>
                        <span class="testimonial-slider__designation">Customer </span>
                    </div>
                   </div>
                   <div class="testimonial-slider">
                    <div class="testimonial-slider__icon">
                        <img src="assets/picture/testimonial-icon.png" alt="">
                    </div>
                    <p class="testimonial-slider__desc">
                       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero necessitatibus deserunt Eligendi dolorem delectus illo impedit nulla.
                    </p>
                    <div class="testimonial-slider__details">
                        <h4 class="testimonial-slider__name"> Walton </h4>
                        <span class="testimonial-slider__designation">Customer </span>
                    </div>
                   </div>
                   <div class="testimonial-slider">
                    <div class="testimonial-slider__icon">
                        <img src="assets/picture/testimonial-icon.png" alt="">
                    </div>
                    <p class="testimonial-slider__desc">
                        A great about us block helps builds trubetween you customers. The more content you provide about you and your business
                    </p>
                    <div class="testimonial-slider__details">
                        <h4 class="testimonial-slider__name">Andre Russell</h4>
                        <span class="testimonial-slider__designation">Customer </span>
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- =========================testimonial section end here ==========================-->
<!--========================== Coverage Section Start ==========================-->
<div class="client pb-120 pt-60">
    <div class="container">
        <div class="client-logos client-slider">
            <img src="assets/picture/client-01.png" alt="">
            <img src="assets/picture/client-04.png" alt="">
            <img src="assets/picture/client-03.png" alt="">
            <img src="assets/picture/client-04.png" alt="">
            <img src="assets/picture/client-01.png" alt="">
            <img src="assets/picture/client-04.png" alt="">
            <img src="assets/picture/client-03.png" alt="">
        </div>
    </div>
</div>
<!--========================== Coverage Section End ==========================-->
<!-- ==================== Blog Start Here ==================== -->
<section class="blog py-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading">
                    <h2 class="section-heading__subtitle">Blog Post</h2>
                    <h3 class="section-heading__title style-two"> Latest news post <span class="section-heading__bars"></span> </h3>
                </div>
            </div>
        </div>
        <div class="row gy-4 justify-content-center align-items-center">
            <div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6">
                <div class="blog-item">
                    <div class="blog-item__thumb">
                        <a href="blog-details.html" class="blog-item__thumb-link">
                            <img src="assets/picture/blog03.png" alt="">
                        </a>
                    </div>
                    <div class="blog-item__date">
                        <span class="blog-item__month">18</span>
                        <span class="blog-item__month">May</span>
                    </div>
                    <div class="blog-item__content">
                        <h4 class="blog-item__title"><a href="blog-details.html" class="blog-item__title-link">Amet Occumsan Fringilla Molestie Urna Hendrerit  </a></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6">
                <div class="blog-item">
                    <div class="blog-item__thumb">
                        <a href="blog-details.html" class="blog-item__thumb-link">
                            <img src="assets/picture/blog01.png" alt="">
                        </a>
                    </div>
                    <div class="blog-item__date">
                        <span class="blog-item__month">22</span>
                        <span class="blog-item__month">May</span>
                    </div>
                    <div class="blog-item__content">
                        <h4 class="blog-item__title"><a href="blog-details.html" class="blog-item__title-link">Maecenas Sed Facilisis Ipsum. Duis Scelerisque Mi Magna </a></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6 d-block d-lg-none">
                <div class="blog-item">
                    <div class="blog-item__thumb">
                        <a href="blog-details.html" class="blog-item__thumb-link">
                            <img src="assets/picture/blog01.png" alt="">
                        </a>
                    </div>
                    <div class="blog-item__date">
                        <span class="blog-item__month">22</span>
                        <span class="blog-item__month">May</span>
                    </div>
                    <div class="blog-item__content">
                        <h4 class="blog-item__title"><a href="blog-details.html" class="blog-item__title-link">Maecenas Sed Facilisis Ipsum. Duis Scelerisque Mi Magna </a></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6">
                <div class="blog-item">
                    <div class="blog-item__thumb">
                        <a href="blog-details.html" class="blog-item__thumb-link">
                            <img src="assets/picture/blog02.png" alt="">
                        </a>
                    </div>
                    <div class="blog-item__date">
                        <span class="blog-item__month">29</span>
                        <span class="blog-item__month">May</span>
                    </div>
                    <div class="blog-item__content">
                        <h4 class="blog-item__title"><a href="blog-details.html" class="blog-item__title-link">Wenean Vitae Porttitor Ante Tempor Posuere Nisl.  </a></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==================== Blog End Here ==================== -->
<!--============================feature section start here =======================-->
<div class="feature-section bg-img py-60" style="background-image: url(../static/assets/picture/feature-img.png);">
    <div class="container">
        <div class="row gy-4">
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f04.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FREE SHIPPING
                        </h5>
                        <span class="feature-item__payment"> For All Order Over $99 </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f03.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FRIENDLY SUPPORT
                        </h5>
                        <span class="feature-item__payment"> 24/7 Customer Support </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f02.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SECURE PAYMENT
                        </h5>
                        <span class="feature-item__payment">100%  Secure Payment</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f01.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SHIPPING & RETURN
                        </h5>
                        <span class="feature-item__payment"> within 30days For Refund </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ==========================feature setion end here ============================-->



<!-- ========footer===== -->

<!-- ==================== Footer Start Here ==================== -->
<footer class="footer-area section-bg-light bg-img">
    <div class="pb-60 pt-120">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href=""> <img src="assets/picture/footer-logo02.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                        <ul class="social-list">
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Pages </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a></li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="cart.html" class="footer-menu__link">Shopping Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="product-two-details.html" class="footer-menu__link"> Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful link </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="product-category.html" class="footer-menu__link"> Product Category </a></li>
                            <li class="footer-menu__item"><a href="check-out.html" class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="registration.html" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title">Subscribe now</h5>
                        <div class="subscriber-form mb-3">
                            <input type="text" class=" form--control style-two" placeholder="Email Address" aria-label="Recipient's username">
                            <button class="btn btn--base subscribe-button"><i class="fas fa-paper-plane"></i></button>
                          </div>
                          <p>Subscribe to our newsletter and get 10% off your first purchase..</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer section-bg py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text">  Copyright &copy; 2023 . All rights reserved by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
  <!-- ==================== Footer End Here ==================== -->
  
<!-- Jquery js -->
<script data-cfasync="false" src="assets/js/email-decode.min.js"></script><script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- mixitup js -->
<script src="assets/js/mixitup.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

 <script>
    // mixitup 
   var mixer = mixitup('.product');
</script>
</body>
</html>